<template>
  <div class="new-process">
    <navigate />

    <type
      v-model="type"
      label="流程分类"
      clearable
      @load-data="loadData"
      @clear-data="init"
    />

    <div>
      <van-list v-model="loading" :finished="finished" @load="loadDefineList">
        <card-list
          v-for="(item,index) in list"
          :key="item.id+index"
          :title="item.name"
          :desc="item.desc"
          :date="item.createTime|formatTime"
          :tag="_getStatus(item.status)"
          :tag-type="_getStatusType(item.status)"
          :bg-color="_randomColor(item.name)"
          :icon="_randomIcon(item.name)"
          is-link
          @click="toStart(item)"/>
        <list-result-page
          :result-type="resultType"
          :error-type="errorType"
          :result-message="resultMessage"/>
      </van-list>
    </div>

  </div>
</template>
<script>

import Navigate from '@/components/LcControl/nav'
import Type from '@/components/LcControl/type'
import CardList from '@/components/CardList'
import ListResultPage from '@/components/ListResultPage'
import { formatParams, loadFinished, getResultType } from '@/utils/params'
import { defList } from '@/api/platform/bpmn/bpmn'
import random from '@/mixins/random'
import bpmnStatus from '@/mixins/bpmnStatus'

export default {
  name: 'DefineList',
  components: {
    CardList,
    ListResultPage,
    Navigate,
    Type
  },
  mixins: [random, bpmnStatus],
  data() {
    return {
      list: [],
      type: '',
      typeId: '0',
      loading: false,
      finished: false,
      isLoading: true,
      page: 1,
      pageSize: 15,
      totalCount: 0,
      resultType: 'init',
      errorType: null,
      resultMessage: null,
      flowTypes: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.typeId = ''
      this.page = 1
      this.list = []
      this.loadDefineList()
    },
    loadDefineList() {
      const params = formatParams({ 'Q^subject_^SL': this.subject, 'Q^TYPE_ID_^S': this.typeId }, { 'page': this.page })
      defList(params).then(response => {
        const data = response.data
        if (this.$utils.isEmpty(data)) {
          this.loading = false
          this.isLoading = false
          this.finished = true
          // 结果类型
          this.resultType = 'empty'
        } else {
          if (this.$utils.isNotEmpty(data.dataResult)) {
            if (this.page !== data.pageResult.page) return
            this.page++
            this.list = this.list.concat(data.dataResult)
            this.finished = false
          }
          this.finished = !!loadFinished(data.pageResult)
          this.loading = false
          this.isLoading = false
          // 结果类型
          this.resultType = getResultType(this.list, this.finished)
        }
      }).catch((e) => {
        this.resultType = 'error'
        this.loading = false
        this.isLoading = false
        this.resultMessage = e.message
      })
    },
    toStart(item) {
      this.$router.push({
        name: 'bpmnForm',
        query: {
          defId: item.id
        },
        params: {
          title: item.name
        }
      })
    },
    loadData() {
      this.page = 1
      this.list = []
      this.typeId = this.type
      this.loadDefineList()
    }
  }
}
</script>
<style lang="scss">

.new-process {
  .menus-icon {
    .van-col {
      text-align: center;
      float: none;
      display: inline-block;
      vertical-align: middle;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .title {
      display: block;
      font-size: 14px;
      padding-top: 10px;
    }
  }
}
</style>
